<template>
  <CustomEcharts :id="props.id" height="1175px" :full-options="echartsOptions" :loading="false">
  </CustomEcharts>
</template>
  
  <script setup>
// 引进Echarts 组件
import { onMounted, reactive, defineProps, watch } from "vue";
import CustomEcharts from './customEcharts.vue';
import * as echarts from 'echarts';
import { Right } from "@element-plus/icons-vue";

const props = defineProps({
  echartsData: Object,
  id: String
});
const echartsOptions = reactive({
  options: {},
  init: false
});
const testOption = (data, dimensions) => {
  let series = [];
  let colorArr = ['#2F7EF5', '#14C9C9', '#FAC858'];
  props.echartsData.series.forEach((element, index) => {
    series.push({
      name: element.name ? element.name : props.echartsData.name,
      type: "bar",
      barWidth: '20px',
      stack: "总量",
      barCategoryGap: "20",
      label: {
        normal: {
          show: true,
          formatter: function (params) {
            const rawValue = element.data[params.dataIndex];         
            const percentage = Math.round(params.value * 1000) / 10;
            return `${percentage}%`;
          },
          color: "#fff",
        },
      },
      itemStyle: {
        normal: {
          color: colorArr[index]

        },
      },
      data: element.data,
    })
  });
  const option = {
    legend:{},
    tooltip: {
      trigger: "axis",
    },
    grid: {
      top: "20",
      bottom: "0",
      left: "0",
      Right: 0,
      containLabel: true,
    },
    xAxis: [{
      show: false
    },],
    yAxis: [
      {

        type: "category",
        data: props.echartsData.xaxis ? props.echartsData.xaxis : [],
        nameTextStyle: {
          color: "#C9CDD4", //颜色
          padding: [0, 0, 0, 0], //间距分别是 上 右 下 左
        },
        axisLabel: {
          textStyle: {
            color: "#000",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#C9CDD4'
          }
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#E5E6EB",
            type: "dashed",
          },
        },
      },

    ],
    series: series
  };
  return option;
}
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const testData = [];
  const testDimensions = ['name', 'value'];
  echartsOptions.options = testOption(testData, testDimensions);
});
  </script>